<template>
	<view>
		<view class="card_view">
			<view class="card_card">
				<view class="card_left">
					<view class="card_left_avatar">
						<image class="card_left_avatar_image" mode="aspectFit" src="/static/img//account_avatar.png">
						</image>
					</view>
					<view class="card_left_content">
						<text class="card_left_content_title">{{nickName?nickName:"游客"}}</text>
						<text class="card_left_content_subtitle">欢迎您！</text>
					</view>
				</view>
				<view class="card_right">
					<button class="mini-btn" type="default" size="mini" @click="userDialogOpen">编辑</button>
				</view>
			</view>
		</view>
		<uni-list>
			<uni-list-item title="我的设备" showArrow thumb="/static/tabBar_icon/myDevices.png" thumb-size="sm"
				@click="toDevice" clickable />
		</uni-list>
		<!-- 编辑昵称的弹出层 -->
		<view>
			<uni-popup ref="userPopup" type="dialog">
				<uni-popup-dialog ref="userDialog" mode="input" title="编辑用户昵称" before-close
					@confirm="userDialogConfirm" @close="userDialogClose">
					<uni-easyinput class="uni-mt-5" v-model="nickName2update" placeholder="当前仅支持更改昵称" maxlength="7">
					</uni-easyinput>
				</uni-popup-dialog>
			</uni-popup>
		</view>

		<view v-show="platform != 'mp-weixin'" id="ss" @tap="tap_down()"
			style="width: 260rpx;height: 85rpx;background-color: darkgrey;border-radius: 50px;font-size: 22px;padding-top: 22rpx;padding-left: 90rpx;margin-left: 190rpx;margin-top: 100rpx;">
			退出登录
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['nickName', 'loginState'])
		},
		data() {
			return {
				nickName2update: '',
				avatar: '/static/img/account_avatar.png',
				list: [{
					name: '收藏',
					id: 'favorites',
					icon: 'star-fill',
					iconBackground: '#398c0c',
				}, {
					name: '相册',
					id: 'photoAlbum',
					icon: 'photo-fill',
					iconBackground: '#5e2d88',
				}, {
					name: '卡包',
					id: 'cardPackage',
					icon: 'grid-fill',
					iconBackground: '#33696c',
				}, {
					name: '表情',
					id: 'expression',
					icon: 'gift-fill',
					iconBackground: '#833456',
				}, {
					name: '设置',
					id: 'setUp',
					icon: 'setting-fill',
					iconBackground: '#3b2021',
				}],
				platform: '',
				token: ""
			}
		},
		methods: {
			...mapActions(['logoutAction', "loginAction"]),
			toDevice() {
				uni.navigateTo({
					url: '/pages/myDevices/myDevices'
				});
			},
			tap_down() {
				this.logoutAction(this.phone)
				uni.redirectTo({
					url: '/pages/login/login'
				});
			},
			userDialogOpen() {
				// 目前功能简陋，只可以更改昵称
				this.$refs.userPopup.open()
			},
			userDialogClose(){
				this.$refs.userPopup.close()
			},
			userDialogConfirm() {
				// 目前功能简陋，只可以更改昵称
				this.nickName2update = this.nickName2update.trim()
				if (this.nickName2update) {
					uni.showLoading({
						title: '加载中'
					});
					uni.$u.http.post(`${this.urlConfig.appServerPrefix}/mduser/updateUser`, {
						nickName: this.nickName2update
					}, {
						header: {
							'token': this.token
						}
					}).then(res => {
						if (res.data.code == 100) {
							uni.showToast({
								title: '编辑完成'
							})
							this.loginAction(this.nickName2update);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							})
						}
						uni.hideLoading();
						this.$refs.userPopup.close()
					}).catch(err => {
						uni.hideLoading();
						console.log(err)
					})
				}
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token');
			if (!this.loginState) {
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
			uni.getSystemInfo({
				success: res => {
					console.log(res)
					this.platform = res.uniPlatform;
				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.card_card {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		overflow: hidden;
	}

	.card_left {
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}

	.card_left_avatar {
		width: 40px;
		height: 40px;
		overflow: hidden;
		border-radius: 5px;
		margin-right: 10px;
	}

	.card_left_avatar_image {
		flex: 1;
		width: 40px;
		height: 40px;
	}

	.card_left_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
	}

	.card_left_content_title {
		font-size: 15px;
		color: #3a3a3a;
	}

	.card_left_content_subtitle {
		font-size: 12px;
		margin-top: 5px;
		color: #909399;
	}

	.card_right {
		line-height: 12px;
	}

	.card_right_content {
		font-size: 12px;
		color: #909399;
	}

	.card_view {
		padding: 0 10px;
		background: #ffffff;
	}
</style>
